<!DOCTYPE html>
{block name="include"}{include file="head" /}{/block}
<html class="x-admin-sm">
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form form1" lay-filter="form1" id="form">
                <div class="layui-form-item">
                      <label for="username" class="layui-form-label">
                          <span class="x-red">*</span>账号
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="user_name" name="user_name" required="" lay-verify="user_name"
                          autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                          <span class="x-red">*</span>将会成为您唯一的账号
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="phone" class="layui-form-label">
                          <span class="x-red">*</span>头像
                      </label>
                      <div class="layui-input-inline">
                          <button type="button" class="layui-btn" id="test1">
                              <i class="layui-icon">&#xe67c;</i>上传图片
                          </button>
                          <input type="hidden" name="user_img" id="user_img" >
                          <input type="hidden" name="user_thumb_img" id="user_thumb_img" >
                          <button id="upload_img" type="button" hidden></button>
                          <div class="" id="colla_img" style="">

                          </div>

                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="L_pass" class="layui-form-label">
                          <span class="x-red">*</span>密码
                      </label>
                      <div class="layui-input-inline">
                          <input type="password" id="L_pass" name="user_password" required="" lay-verify="pass"
                          autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                          6到16个字符
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                          <span class="x-red">*</span>确认密码
                      </label>
                      <div class="layui-input-inline">
                          <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>角色</label>
                        <div class="layui-input-block">
                            {foreach $role as $v}
                            <input type="radio" name="role_id"  lay-skin="primary" value="{$v.id}" title="{$v.role_name}" lay-verify="otherReq">
                            {/foreach}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>账号状态</label>
                        <div class="layui-input-block">

                            <input type="radio" name="user_status"  lay-skin="primary" value="0" title="停用" lay-verify="otherReq">
                            <input type="radio" name="user_status"  lay-skin="primary" value="1" title="启用" lay-verify="otherReq">

                        </div>
                    </div>
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button  class="layui-btn" lay-filter="add" lay-submit="" id="tj">
                          增加
                      </button>
                  </div>
              </form>
            </div>
        </div>
        <script>layui.use(['form','upload', 'layer'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                var upload = layui.upload;
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    ,url: "{:url('admin/Base/upload')}" //上传接口
                    ,acceptMime: 'image/*',
                    size:20480
                    ,bindAction: '#upload_img'//指向一个按钮触发上传
                    ,choose: function(obj){
                        //将每次选择的文件追加到文件队列
                       // var files = obj.pushFile();

                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file, result){

                            $('#colla_img').find('img').remove();
                            $('#colla_img').append('<img  name="img" src="' + result + '" width="200px" height="150px">');

                        });
                    }
                    ,done: function(res){

                       $('#user_img').val(res.filename); //隐藏输入框赋值
                       $('#user_thumb_img').val(res.thumb); //隐藏输入框赋值
                        //上传成功后单击隐藏的提交按钮
                        //上传完毕回调
                    }
                    ,error: function(index, upload){
                        //请求异常回调
                        layer.msg('上传失败！', {icon: 5});
                    }
                });
                //自定义验证规则
                form.verify({
                    user_name: function(value) {
                        if (value.length < 3) {
                            return '账号至少得3位数';
                        }
                    },
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    repass: function(value) {
                        if ($('#L_pass').val() != $('#L_repass').val()) {
                            return '两次密码不一致';
                        }
                    },
                    otherReq: function(value,item){
                        var $ = layui.$;
                        var verifyName=$(item).attr('name')
                            , verifyType=$(item).attr('type')
                            ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                            ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                            ,isTrue= verifyElem.is(':checked')//是否命中校验
                            ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                        if(!isTrue || !value){
                            //定位焦点
                            focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
                            //对非输入框设置焦点
                            focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                                focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
                            }).focus();
                            return '必填项不能为空';
                        }
                    }

                });
                //监听提交
                form.on('submit(add)',
                function(data) {

                    $.ajax({
                        url: "{:url('admin/User/create')}",
                        type:'post',
                        data:data.field,
                        success:function (callback) {
                            if (callback.msg == 200){
                                layer.msg('增加成功',{icon:6});
                                setTimeout(function () {
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                },1200);
                            }else {
                                layer.msg(callback.msg, {icon: 5})
                            }

                        }
                    });
                    return false;


                });

            });








        </script>

    </body>

</html>
